<template>
  <ph-page :theme="theme" dir="row">
    <ph-aside>
      <div class="logo">phoeon</div>
      <ph-menu-tree
        :trees="menus"
        :current="routerMatched"
        @action="onAction"
      />
    </ph-aside>
    <ph-layout dir="col">
      <ph-header>
        <ph-nav :current="cnav" @navigate="onNavigate" justify="flex-end">
          <ph-nav-item icon="chrome" action="/nav">导航</ph-nav-item>
          <ph-nav-item icon="firefox" action="/button">按钮</ph-nav-item>
          <ph-sub-nav title="主题切换">
            <ph-nav-item action="dark">深色</ph-nav-item>
            <ph-nav-item action="light">浅色</ph-nav-item>
            <ph-nav-item action="primary">蓝色</ph-nav-item>
            <ph-nav-item action="success">绿色</ph-nav-item>
            <ph-nav-item action="danger">红色</ph-nav-item>
            <ph-nav-item action="warning">黄色</ph-nav-item>
          </ph-sub-nav>
        </ph-nav>
      </ph-header>
      <!-- <ph-breadcrumb :navs="pathMatched"/> -->
      <ph-tabbar ref="etabbar" @shift="onTabShift" @reload="onTabReload" />
      <ph-main>
        <router-view v-slot="{ Component, route }">
          <transition name="ph-fs" mode="out-in">
            <keep-alive>
              <component :is="Component" :key="route.fullPath" />
            </keep-alive>
          </transition>
        </router-view>
      </ph-main>
    </ph-layout>
  </ph-page>
</template>
<script lang="ts">
import "@/assets/css/font-awesome.scss";

import { defineComponent, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { TreeNode } from "@/components/menu/struct";

import menus from "./navs";

export function searchPath(tree:Array<any>,k:string|number):undefined|Array<any>{
    if(!tree||!tree.length)return
    let res:undefined|Array<any>;
    for(let i=0;i<tree.length;i++){
        const node = tree[i]
        if (node.action === k) return [node]
        res = searchPath(node.children,k)
        if (res)
        return [...res,node]
    }
}

import {
  PhPage,
  PhHeader,
  PhLayout,
  PhMain,
  PhAside,
  PhTabbar,
  PhNav,
  PhNavItem,
  PhSubNav,
  PhMenuTree,
  PhBreadcrumb,
} from "./index";
export default defineComponent({
  components: {
    PhPage,
    PhHeader,
    PhLayout,
    PhMain,
    PhAside,

    PhTabbar,
    PhNav,
    PhNavItem,
    PhSubNav,
    PhMenuTree,
    PhBreadcrumb,
  },
  setup() {
    const router = useRouter();
    const routerMatched = ref(location.pathname);
    const cnav = ref(location.pathname);
    const themes = ["dark", "light", "primary", "success", "danger", "warning"];
    const theme = ref("dark");
    const pathMatched = ref<TreeNode[]>(
      searchPath(menus, routerMatched.value) || []
    );
    const easide = ref<InstanceType<typeof PhAside>>();
    const etabbar = ref<InstanceType<typeof PhTabbar>>();

    router.push(routerMatched.value);
    const onAction = (action: string, paths: TreeNode[]) => {
      console.log(action, "action");
      console.log(paths);
      pathMatched.value = paths;
      router.push(action);
      etabbar.value?.addTab(paths[paths.length - 1] as any);
      routerMatched.value = action;
      cnav.value = action;
    };
    const onTabShift = (action: string) => {
      console.log(action);
      const paths = searchPath(menus, action);
      if (paths) {
        pathMatched.value = paths;
        router.push(action);
        routerMatched.value = action;
        cnav.value = action;
      }
    };
    const onTabReload = (action: string) => {
      console.log("realod", action);
      router.go(0);
    };
    const onNavigate = (k: string) => {
      if (themes.includes(k)) {
        theme.value = k;
        return;
      }
      console.log(k, "navigate");
      router.push(k);
      cnav.value = k;
      routerMatched.value = k;
    };
    const toggleAside = () => {
      console.log(easide.value);
      easide.value?.toggleAside();
    };

    onMounted(() => {
      const tab = pathMatched.value[0];
      if (tab) etabbar.value?.addTab(tab as any);
    });
    return {
      menus,
      routerMatched,
      cnav,
      theme,
      pathMatched,

      easide,
      etabbar,

      onAction,
      onNavigate,
      toggleAside,
      onTabShift,
      onTabReload,
    };
  },
});
</script>
<style lang="scss">
.logo {
  color: #fff;
  background-color: var(--ph-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ph-aside-width);
  height: var(--ph-topbar-height);
  font-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  text-shadow: 0 0 1px #fff;
  border-right: 5px solid var(--ph-dark-d1);
}
@media screen and (max-width: 768px) {
  .logo {
    border-right: none;
  }
}
</style>
